<template>
  <view class="charts-box">
    <view class="title">
      参与人数
    </view>
    <view class="button">
      <view :class="active===1?'active': ''" @click="qiehuan(1)">天</view>
      <view :class="active===2?'active': ''" @click="qiehuan(2)">月</view>
      <view :class="active===3?'active': ''" @click="qiehuan(3)">年</view>
    </view>
    <qiun-data-charts
        type="line"
        :opts="opts"
        :chartData="chartData"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      active:1,
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#FAC58D"],
        padding: [15, 10, 0, 15],
        enableScroll: false,
        type: 'area',//阴影效果
        dataLabel: false,// 隐藏每条数据的数量
        dataPointShape: false,// 隐藏每段折线的圆点
        legend: {
          show: false,// 隐藏图例
        },
        xAxis: {
          disableGrid: true,
          axisLine: false,
          gridColor: '#E4EEF1', // 竖线颜色
          boundaryGap: 'center'
        },
        yAxis: {
          disableGrid: true, // 隐藏横线
          disabled: true, // 隐藏刻度文字
        },
        extra: {
          area: {
            type: "straight",// 线条类型
            opacity: 1,//阴影效果
            addLine: true,
            width: 1,// 线条宽度
            gradient: true,
            activeType: "solid",
          },
          tooltip: {
            showBox: true,
            showArrow: false,
            borderWidth: 1,// 边框宽度
            borderColor: '#FAC58D',// 边框颜色
            boxPadding: 10,// 内边距
            bgOpacity: 1, // 透明度
            gridColor: '#FAC58D',// 选中行颜色
            borderRadius: 20,//圆角
            bgColor: '#ffffff',// 提示窗口背景颜色
            fontColor: '#000',// 文字颜色
            legendShow: false,//不显示图例
          },
        }
      }
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          categories: ["3-21", "3-22", "3-23", "3-24", "3-25", "3-26"],
          series: [
            {
              name: "人次",
              data: [32, 2, 15, 18, 17, 40],
            }
          ]
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
    qiehuan(num){
      this.active = num
    }
  }
};
</script>

<style lang="scss" scoped>

.charts-box {
  width: 100%;
  height: 340rpx;

  .title {
    font-size: 32rpx;
    font-weight: 500;
    display: inline-block;
    padding: 30rpx;
  }

  .button {
    margin-top: 30rpx;
    padding-right: 10rpx;
    display: inline-block;
    float: right;
    vertical-align: middle;
    view{
      font-size: 26rpx;
      padding: 10rpx 40rpx;
      color: #8CA2A6;
      display: inline-block;
      border-radius: 30rpx;
      line-height: 30rpx;
    }
    .active{
      color: #fff;
      background-color: #16C1DB;
    }
  }
}

</style>
